<header>
    v-model
</header>
<pre tag="html">
    <input v-model="info">
</pre>
<p>
    上面的代码等价于：
</p>
<pre tag="html">
    <input :value="info" @input="info = $event.detail.value">
</pre>
<p>
    当用在组件上时，则会这样：
</p>
<pre tag="html">
    &lt;ui-input :modelValue="info" @update:modelValue="value => info = value"&gt;
</pre>
<p>
    当然，这等价于：
</p>
<pre tag="html">
    &lt;ui-input v-model="info"&gt;
</pre>
<p>
    为了让它正常工作，这个组件内的
    <span class="special">&lt;input&gt;</span>
    写成代码之后是这样的：
</p>
<pre tag="html">
&lt;script setup&gt;
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
&lt;/script&gt;
    
<template>
    <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.detail.value)"
    />
</template>
</pre>
<h2>
    自定义参数
</h2>
<p>
    默认情况下，v-model 在组件上都是使用 modelValue 作为 prop，并以 update:modelValue 作为对应的事件。我们可以通过给 v-model 指定一个参数来更改这些名字：
</p>
<pre tag="html">
    &lt;ui-input v-model:myValue="info"&gt;
</pre>
<p>
    在这个例子中，子组件应声明一个 myValue prop，并通过触发 update:myValue 事件更新父组件值：
</p>
<pre tag="html">
&lt;script setup&gt;
defineProps(['myValue'])
defineEmits(['update:myValue'])
&lt;/script&gt;
    
<template>
    <input
    :value="myValue"
    @input="$emit('update:myValue', $event.detail.value)"
    />
</template>
</pre>